<script setup>
const { data } = await useApiFetch("/newapi/article_v1");
const articleList = computed(() => data.value?.list || []);
const isClient = ref(false);
onMounted(() => {
  isClient.value = true;
});

function uFormData(value) {
  if (!value) return "--";
  const date = new Date(value);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  return `${year}-${month}-${day}`;
}
</script>

<template>
  <div class="min-h-screen">
    <div class="max-w-4xl mx-auto">
      <div class="grid gap-6 mx-5 py-5">
        <div
          v-for="article in articleList"
          :key="article._id"
          class="min-h-25 bg-gradient-to-l from-bsy to-bsr/90 backdrop-blur-lg rounded-xl overflow-hidden hover:shadow-lg transition-all"
        >
          <NuxtLink
            :to="`/article/${article._id}`"
            class="flex flex-col md:flex-row"
          >
            <!-- 封面图 -->
            <div
              :class="[
                'md:h-20 md:h-45 overflow-hidden border-r-1 border-bsr/40 bg-bsr/30',
                article.avatar?.url ? 'md:w-1/3' : 'w-auto',
              ]"
            >
              <img
                v-if="article.avatar?.url"
                :src="article.avatar?.url || ''"
                class="h-20 w-full md:h-45 object-cover"
              />
            </div>
            <!-- 文章内容 -->
            <div class="p-3 md:w-2/3 flex flex-col">
              <h2 class="text-xl font-bold text-white mb-2">
                {{ article.title }}
              </h2>
              <p class="text-white/70 mb-4 line-clamp-2">
                {{ article.description }}
              </p>
              <div class="flex items-center text-sm text-white/50 mt-auto">
                <span class="mx-2" v-if="isClient"
                  >日期：{{ uFormData(article.publish_date) }}</span
                >
                <span>浏览量：{{ article.view_count }}</span>
              </div>
            </div>
          </NuxtLink>
        </div>
      </div>
    </div>
  </div>
</template>
